<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <title>飞腾会-FitaClub</title>
  <%@ include file="/WEB-INF/include/meta.jsp" %>
  <%@ include file="/WEB-INF/include/css.jsp" %>
</head>
<!-- end header -->

<body>
<div class="page-group">
  <div class="page page-current bg-light-gray">
    <header class="bar bar-nav fita-header">
      <a href="javascript:history.back(-1);" class="icon icon-left pull-left"></a>
      <%-- <a href="${ctx.host}/cars/search" class="button pull-right">重选</a> --%>
      <h1 class="title">订单详情</h1>
    </header>

    <!-- 保留预定 -->
    <c:if test="${order.status.staying }">

      <div class="bar bar-footer fita-footer order-button">

          <%-- 	      	<!-- 可以取消订单 -->
                        <c:if test="${order.isCouldCancelBooking() }">
                            <a href="javascript:void(0);" data-href="${ctx.host}/orders/${order.id}/cancel-booking" class="button staying-button cancelBooking">取消预定</a>
                        </c:if>
                        <!-- 不可以取消订单 -->
                        <c:if test="${!order.isCouldCancelBooking() }">
                            <a href="javascript:void(0);" class="button staying-button not-cancel-booking disabled">取消预定</a>
                        </c:if>
                     --%>
        <a href="${ctx.host}/shopping/result?type=pay&orderId=${order.id}" class="button" style="width: 100%">立即支付</a>
      </div>

    </c:if>

    <!-- 待支付 -->
    <c:if test="${order.status.unpaid}">
      <!-- 预付订单 -->
      <c:if test="${order.type.prepay}">

        <!-- 可以取消订单 -->
        <c:if test="${order.isCouldCancelOrder() }">
          <div class="bar bar-footer fita-footer order-button">
            <a href="javascript:void(0);" data-href="${ctx.host}/orders/${order.id}/cancel"
               class="button staying-button cancelOrder">取消订单</a>
            <a href="${ctx.host}/shopping/result?type=pay&orderId=${order.id}" class="button">立即支付</a>
          </div>
        </c:if>
        <!-- 不可以取消 -->
        <c:if test="${!order.isCouldCancelOrder() }">
          <div class="bar bar-footer fita-footer order-button">
            <a href="javascript:void(0);" class="button staying-button not-cancel-booking disabled">取消订单</a>
            <a href="${ctx.host}/shopping/result?type=pay&orderId=${order.id}" class="button">立即支付</a>
          </div>
        </c:if>

      </c:if>

      <!-- 到付订单可取消 -->
      <c:if test="${order.type.arrivepay && order.isCouldCancelOrder()}">
        <div class="bar bar-footer fita-footer order-button">
          <a href="javascript:void(0);" data-href="${ctx.host}/orders/${order.id}/cancel"
             class="button staying-button cancelOrder" style="width: 100%">取消订单</a>
        </div>
      </c:if>
      <!-- 到付订单不可取消 -->
      <c:if test="${order.type.arrivepay && !order.isCouldCancelOrder()}">
        <div class="bar bar-footer fita-footer order-button">
          <a href="javascript:void(0);" class="button staying-button not-cancel-booking disabled"
             style="width: 100%">取消订单</a>
        </div>
      </c:if>

    </c:if>

    <!-- 已支付 -->
    <c:if test="${order.status.paid && order.isCouldCancelOrder()}">
      <div class="bar bar-footer fita-footer order-button">
        <a href="javascript:void(0);" data-href="${ctx.host}/orders/${order.id}/cancel"
           class="button staying-button cancelOrder" style="width: 100%">取消订单</a>
      </div>
    </c:if>

    <div class="content">
      <div class="card order-info-card">
        <div class="card-content">
          <div class="item" style="position: relative; margin-bottom: .5rem;">
            <div class="clearfix">
              <div class="pull-left"><span class="label">取车：</span>
                <div class="location">${pickupLocation.cityName}</div>
              </div>
              <p class="pull-right no-margin"><fmt:formatDate value="${order.pickupDate}"
                                                              pattern="yyyy-MM-dd HH:mm"/></p>
            </div>
            <div class="detail"
                 style="margin-top: .25rem;padding-left: 2.1rem;display: block; max-width: 100%; font-size: .6rem; line-height: 1.3;">
              <p>${pickupLocation.name}</p>
              <p>${pickupLocation.addressOne}</p>
              <p>TEL:&nbsp;${pickupLocation.phone}</p>
              <%-- <p>${pickupLocation.addressTwo}</p> --%>
            </div>
            <div class="icon-layout"
                 style="position: absolute; top: 50%; left: .35rem; margin-top: -.25rem;">
                            <span class="iconfont iconfont-shophours" data-work="pickupLocation"
                                  style="font-size: 1rem;"></span>
            </div>
          </div>
          <div class="item" style="position: relative;">
            <div class="clearfix">
              <div class="pull-left">
                <span class="label">还车：</span>
                <div class="location">${returnLocation.cityName}</div>
              </div>
              <p class="pull-right no-margin"><fmt:formatDate value="${order.returnDate}"
                                                              pattern="yyyy-MM-dd HH:mm"/></p>
            </div>
            <div class="detail"
                 style="margin-top: .25rem;padding-left: 2.1rem;display: block; max-width: 100%; font-size: .6rem; line-height: 1.3;">
              <p>${returnLocation.name}</p>
              <p>${returnLocation.addressOne}</p>
              <p>TEL:&nbsp;${returnLocation.phone}</p>
            </div>
            <div class="icon-layout"
                 style="position: absolute; top: 50%; left: .35rem; margin-top: -.25rem;">
                            <span class="iconfont iconfont-shophours" data-work="pickupLocation"
                                  style="font-size: 1rem;"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="list cars-list-layout">
        <div class="card fita-card">
          <div class="card-content">
            <div class="card-content-inner">
              <a href="">
                <div class="car-title">
                  <c:choose>
                    <c:when test="${persist.modelGroups[order.details.carInfo.modelName] != null}">
                      ${persist.modelGroups[order.details.carInfo.modelName].chineseName}
                    </c:when>
                    <c:otherwise>
                      ${order.details.carInfo.modelName}
                    </c:otherwise>
                  </c:choose>
                </div>
                <div class="row no-gutter">
                  <div class="col-66 cars-type">
                    <c:choose>
                      <c:when test="${persist.modelGroups[order.details.carInfo.modelName] != null}">
                        <img src="${cloudContext.domain}/${persist.modelGroups[order.details.carInfo.modelName].picture}"/>
                      </c:when>
                      <c:otherwise>
                        <img src="${order.details.carInfo.picture}"/>
                      </c:otherwise>
                    </c:choose>
                    <p>
                      ${persist.getVehicleSize(order.details.carInfo.modelCodeClass).chineseName}/
                      ${persist.getVehicleCategory(order.details.carInfo.categoryCode).chineseName}/
                      ${car.transmissionType eq 'MANUAL' ? '手动' : '自动'}/
                      ${order.details.carInfo.baggageQuantity}件行李/
                      ${order.details.carInfo.passengerQuantity}座位/
                      ${order.details.carInfo.airConditionIn ? '含空调' : '无空调'}/
                      ${order.details.carInfo.modelCodeType eq 'B' ? '2门' : order.details.carInfo.modelCodeType eq 'C' ? '2或4门' : '4门或5门'}</p>
                  </div>
                  <div class="col-33 price-box" style="margin-bottom: 1.25rem;margin-top:.75rem;">
                    <c:choose>
                      <c:when test="${set.payType.arrivepay}">
                        <c:set var="exchangeRate"
                               value="${persist.exchangeRate(order.currencyCode)}"/>
                        <div class="item" style="margin-bottom: 1.25rem;">
                          <p>官方零售价：</p>
                          <p class="price"><span
                                  style="font-size: .75rem;">${exchangeRate.currencySymbol}</span><fmt:formatNumber
                                  value="${order.retailAmount/100}" type="number"
                                  maxFractionDigits="2" pattern="0.00"/></p>
                        </div>
                        <div class="item" style="margin-bottom: 1.25rem;">
                          <p>返佣：</p>
                          <p class="price current-price"><span
                                  style="font-size: .75rem;">${exchangeRate.currencySymbol}</span><fmt:formatNumber
                                  value="${order.agentCommission}" type="number"
                                  maxFractionDigits="2" pattern="0.00"/></p>
                        </div>
                      </c:when>
                      <c:otherwise>
                        <div class="item" style="margin-bottom: 1.25rem;">
                          <p>官方零售价：</p>
                          <p class="price"><span
                                  style="font-size: .75rem;">￥</span><fmt:formatNumber
                                  value="${order.retailAmount/100 + 0.499999999}" type="number"
                                  maxFractionDigits="0"/>.00</p>
                        </div>
                        <div class="item" style="margin-bottom: 1.25rem;">
                          <p>${set.payType.floatPrepay ? '浮动' : '常规'}价：</p>
                          <c:choose>
                            <c:when test="${not empty order.userCouponId}">
                              <p class="price current-price old-price"><span
                                      style="font-size: .75rem;">￥</span><fmt:formatNumber
                                      value="${order.cnyPayPrice}" type="number"
                                      maxFractionDigits="2" pattern="0.00"/></p>
                              <p class="price current-price new-price"><span
                                      style="font-size: .75rem;">￥</span><fmt:formatNumber
                                      value="${persist.loadCnyPrice(order.id,order.userCouponId)}"
                                      type="number"
                                      maxFractionDigits="2" pattern="0.00"/></p>
                            </c:when>
                            <c:otherwise>
                              <p class="price current-price new-price"><span
                                      style="font-size: .75rem;">￥</span><fmt:formatNumber
                                      value="${order.cnyPayPrice}" type="number"
                                      maxFractionDigits="2" pattern="0.00"/></p>
                            </c:otherwise>
                          </c:choose>

                        </div>
                      </c:otherwise>
                    </c:choose>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="row no-gutter order-details">
        <div class="col-33">
          <p class="name">品牌</p>
          <div class="text">${supplier.chineseName}</div>
        </div>
        <div class="col-33">
          <p class="name">国家</p>
          <div class="text">${country.chineseName}</div>
        </div>
        <div class="col-33">
          <p class="name">预付/到付</p>
          <div class="text">${order.type.description}</div>
        </div>
      </div>

      <div class="user-info shopping-order-layout">
        <div class="box">
          <div class="item">
            <span>套餐：</span>
            <input type="text" value="${set.categoty.chineseName}" readonly name="">
          </div>
          <div class="item">
            <span>姓氏<small class="color-gray">&nbsp;(拼音)</small>：</span>
            <input type="text" value="${order.details.customerInfo.surname}" readonly name="">
          </div>
          <div class="item">
            <span>名字<small class="color-gray">&nbsp;(拼音)</small>：</span>
            <input type="text" value="${order.details.customerInfo.name}" readonly name="">
          </div>
          <div class="item">
            <span>手机号：</span>
            <input type="text" value="${order.details.customerInfo.mobile}" readonly name="">
          </div>
          <div class="item">
            <span>邮箱：</span>
            <input type="text" value="${order.details.customerInfo.email}" readonly name="">
          </div>
          <div class="item">
            <span>年龄：</span>
            <input type="text" value="${order.details.customerInfo.age}" readonly name="">
          </div>
          <div class="item">
            <span>航班号：</span>
            <input type="text" value="${order.details.customerInfo.flightNumber}" readonly name="">
          </div>
        </div>
        <div class="product-detail">
          <c:if test="${not empty include || not empty set.includeContentMap}">
            <div class="fita-block-title">
              <p class="no-margin">价格包含：</p>
              <span class="pull-right iconfont iconfont-down-arrow"></span>
            </div>
            <div class="box">
              <c:forEach var="includeContent" items="${set.includeContentMap.values()}">
                <div class="item" style="padding-left: .25rem;">${includeContent}</div>
              </c:forEach>
              <c:forEach var="includeFee" items="${include}">
                <div class="item"
                     style="padding-left: .25rem;">${includeFee.description}<%-- (${includeFee.currencyCode} ${includeFee.amount}) --%></div>
              </c:forEach>
            </div>
          </c:if>
          <c:if test="${not empty unInclude}">
            <div class="fita-block-title">
              <p class="no-margin">价格不含：(以下费用不计入总价，需在门店另行支付)</p>
              <span class="pull-right iconfont iconfont-down-arrow"></span>
            </div>
            <div class="box">
              <c:forEach var="unIncludeFee" items="${unInclude}">
                <div class="item"
                     style="padding-left: .25rem;">${unIncludeFee.description}(${unIncludeFee.currencyCode} ${unIncludeFee.amount})
                </div>
              </c:forEach>
            </div>
          </c:if>


          <div class="fita-block-title">
            <p class="no-margin">其他：</p>
            <span class="pull-right iconfont iconfont-down-arrow"></span>
          </div>
          <div class="box">
            <div class="item">
              <span>订单号：</span>
              <input type="text" value="${order.code}" readonly>
            </div>
          </div>

          <c:if test="${order.status.paid || (order.status.unpaid && order.type.arrivepay)}">
            <div class="box">
              <div class="item">
                <span>Alamo订单号：</span>
                <input type="text" value="${order.alamoCode}" readonly>
              </div>
            </div>
          </c:if>

          <div class="box">
            <div class="item">
              <span>下单时间：</span>
              <input type="text" value="${dateFormat.format(order.createTime)}" readonly>
            </div>
          </div>

          <c:if test="${not empty order.payTime}">
            <div class="box">
              <div class="item">
                <span>支付时间：</span>
                <input type="text" value="${dateFormat.format(order.payTime)}" readonly>
              </div>
            </div>
          </c:if>

          <c:if test="${not empty order.operateEndDate}">
            <div class="box">
              <div class="item">
                <span>取消时间：</span>
                <input type="text" value="${dateFormat.format(order.operateEndDate)}" readonly>
              </div>
            </div>
          </c:if>

          <c:if test="${order.status.paid || (order.status.unpaid && order.type.arrivepay)}">
            <div class="box">
              <div class="item">
                <span>订单确认书：</span>
                <a id="pdfUrl" data-pdf-url="${order.pdfUrl}" style="display:block;text-align:right;">下载</a>
              </div>
            </div>
          </c:if>

          <c:if test="${not empty order.details.carInfo.specialEquipments}">
            <div class="fita-block-title">
              <p class="no-margin">增值服务：(以下费用不计入总价，需在门店另行支付)</p>
              <span class="pull-right iconfont iconfont-down-arrow"></span>
            </div>
            <div class="box">
              <c:forEach var="equipment" items="${equipments}">
                <div class="item"
                     style="padding-left: .25rem;">${equipment.specialEquipment.chineseName}
                  <c:if test="${not empty equipment.otherPrice}">（${equipment.otherPrice}）</c:if>
                </div>
              </c:forEach>
            </div>
          </c:if>

          <div style="margin: 1rem .5rem;font-weight: bold; font-size: .65rem; color: #262626;">
            <!-- <label>
              <input type="checkbox" name="" checked value="" style="display: inline-block;"><span style="display: inline-block;margin-left: .25rem;vertical-align: top;">我需要开具发票</span>
            </label> -->
            <div style="margin: .25rem 0 .25rem 1rem; line-height: 1;font-weight: bold; font-size: .6rem; color: #262626;">
              <p class="no-margin" style="margin-bottom: .25rem;">此预约可在 <fmt:formatDate
                      value="${order.cancelEndDate}" pattern="yyyy/MM/dd HH:mm"/>之前免费取消</p>
              <p class="no-margin">订单一经确认，未按指定时间取车，将会收取行政费。</p>
            </div>
            <!-- <label>
            <input type="checkbox" name="" checked value="" style="display: inline-block;"><span style="display: inline-block;margin-left: .25rem;vertical-align: top;">我已经阅读并接受取消条款</span>
          </label> -->
          </div>


        </div>
      </div>

      <!-- <div class="content">
          <p>订单确认页</p>
          <a ctx.host="/orders-info-result">立即下单</a>
          <a ctx.host="/orders-info-result">保留订单</a>
          <a>立即支付</a>
      </div> -->
    </div>

    <div class="popup popup-out" style="background: rgba(0,0,0,0.8); filter:alpha(opacity=80);">
      <div class="content-block">
        <p><span class="icon icon-down close-popup"></span></p>
        <img alt="empty" src="../resource/images/out-open.png" style="width: 100%">
      </div>
    </div>

  </div>
</div>
<%@ include file="/WEB-INF/include/script.jsp" %>
<d:resource type="script" root="${ctx.resource}/build" src="js/page/order/order-detail.js"/>
<script type="text/javascript">
    require(['page/order/order-detail'], function (page) {
        page.init({
            orderId: "${order.id}",
            agentMobile: "${order.agent.mobile}",
            pickupLocationId: "${pickupLocation.id}",
            returnLocationId: "${returnLocation.id}"
        })
    })
</script>
</body>
</html>